<template>
  <div class="book-container">
    <div class="book-body">
      <van-empty v-if="!state.bookList.length" description="暂无图书" />
      <van-list
        v-else
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadNextPage"
        loading-text="加载中..."
      >
        <div class="book-list">
          <div
            v-for="item in state.bookList"
            :key="item.id"
            class="book-item"
            @click="onDetail(item)"
          >
            <div
              class="book-item__body"
              :style="`background:${
                bookBgColorList[Math.floor(Math.random() * 5)]
              }`"
            >
              <div class="book-name">{{ item.name }}</div>
              <div style="font-size: 18px; margin-bottom: 20px"></div>
              <div style="font-size: 14px">{{ item.author }}</div>
              <div style="font-size: 14px">{{ item.dynasty }}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-dialog
      v-model:show="bookDetailDialog"
      closeable
      show-cancel-button
      confirm-button-text="编辑"
      cancel-button-text="删除"
      @confirm="onBookEdit(state.bookDetail.id)"
      @cancel="onBookDelete(state.bookDetail.id)"
    >
      <div class="book-dialog_header">图书详情</div>

      <!-- 图书详情 -->
      <div class="book-body">
        <div class="book-header">
          <div class="book-left">
            <div class="book-img"></div>
          </div>
          <div class="book-right">
            <div>{{ state.bookDetail?.name }}</div>
            <div>作者:{{ state.bookDetail?.author }}</div>
            <div>ISBN编码:{{ state.bookDetail?.isbn }}</div>
            <div v-if="state.bookDetail.type == 4">
              朝代:{{ state.bookDetail?.dynasty }}
            </div>
            <div v-if="state.bookDetail.type != 4">
              国家:{{ state.bookDetail?.country }}
            </div>
          </div>
        </div>
        <div
          style="margin-top: 20px; text-align: center; white-space: pre-line"
        >
          {{ state.bookDetail?.summary }}
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import CustomTreeSelect from "@/components/CustomTreeSelect/Index.vue";
import { showToast, showSuccessToast } from "vant";
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useAppStore } from "../../../stores";
import { getBookListForPages, deleteBook } from "../../../service/book";
import { useRoute, useRouter } from "vue-router";

const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

const activeId = ref(1);
const activeIndex = ref(0);
const state = reactive({
  bookList: [],
  bookDetail: {},
  queryParams: {
    pageSize: 21,
    pageNum: 1,
    pages: 0,
    type: undefined,
  },
});

const { queryParams } = toRefs(state);

const loading = ref(false);
const finished = ref(false);
const total = ref(0);

const bookBgColorList = [
  "rgba(255, 74, 87,0.5)",
  "rgba(82, 159, 249,0.5)",
  "rgba(255, 148, 60,0.5)",
  "rgba(124, 112, 245,0.5)",
  "rgba(108, 217, 107,0.5)",
];

appStore.setAppNav("navTitle", "图书");
appStore.setAppNav("navRightText", "新增");
appStore.setAppNav("navRightClick", () => {
  const model = route.query.model;
  router.push({
    name: "libraryCreate",
    query: {
      model,
    },
  });
});

//获取图书列表
const loadData = async () => {
  queryParams.value.type = route.query.model;
  const { data, status } = await getBookListForPages(queryParams.value);

  if (status == 0) {
    // 判断是否已加载完所有数据
    loading.value = false;
    total.value = data.total;
    queryParams.value.pages = data.pages;
    finished.value = queryParams.value.pageNum >= queryParams.value.pages;
    if (queryParams.value.pageNum === 1) {
      // 如果是第一页，直接替换列表数据
      state.bookList = data.list;
    } else {
      // 如果是后续页，追加到列表数据
      state.bookList = [...state.bookList, ...data.list];
    }
    queryParams.value.pageNum++;
  } else {
    state.taskList = [];
    loading.value = false;
    finished.value = false;
  }
};
// 加载下一页数据
const loadNextPage = () => {
  if (loading.value || finished.value) return;
  loading.value = true;
  loadData();
};

loadData();

const bookDetailDialog = ref(false);
const onDetail = (item) => {
  bookDetailDialog.value = true;
  state.bookDetail = item;
};

const onBookDelete = async (id) => {
  const { status } = await deleteBook(id);
  if (status == 0) {
    showSuccessToast("删除成功");
    loadData();
  }
};

const onBookEdit = (id) => {
  router.push({
    name: "libraryEdit",
    query: {
      id,
    },
  });
};
</script>

<style scoped lang="less">
.book-container {
  padding: 0;
  height: calc(100% - 46px);
  display: flex;
  flex-direction: column;

  .book-body {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    .book-list {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      .book-item {
        width: calc(33% - 10px);
        .book-item__body {
          border-radius: 8px;
          width: 100%;
          aspect-ratio: 1 / 1.4;
          text-align: center;
          padding: 8px;
          color: #333;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;

          .book-name {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.book-dialog_header {
  padding: 18px 0;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #e3e3e3;
}

.book-body {
  padding: 20px;
  .book-header {
    display: flex;
    justify-content: space-between;
    .book-left {
      .book-img {
        width: 100px;
        background: #eee;
        aspect-ratio: 1/1.2;
        border-radius: 10px;
      }
    }
    .book-right {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      line-height: 2;
    }
  }
}
</style>
